@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-calendar';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';
$typography: (
  's': $sans-body-s,
  'm': $sans-body-m,
  'l': $sans-body-l,
);

.item {
  display: flex;
}

.label {
  @include composite-var($calendar-item-label-decorator);
}

.marker {
  @include composite-var($calendar-item-marker);

  background-color: $sys-primary-accent-default;
}

.range,
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($calendar, 'item', 'box', $size);
    }
  }
}

.range {
  &:not([data-in-range-position='out']) {
    background-color: $sys-primary-decor-default;
  }

  &[data-in-range-position='in'] {
    border-radius: 0;
  }

  &[data-in-range-position='start'] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &[data-in-range-position='end'] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.button {
  cursor: pointer;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  padding: 0;

  color: simple-var($sys-neutral-text-light);

  appearance: none;
  background-color: transparent;
  border-style: none;
  outline: none;

  &[data-is-holiday] {
    color: simple-var($sys-red-text-light);
  }

  &:focus-visible {
    .box {
      @include outline-inside-var($container-focused-s);

      outline-color: simple-var($sys-available-complementary);
    }
  }

  &[data-is-in-current-level-period] {
    color: simple-var($sys-neutral-text-main);

    &[data-is-holiday] {
      color: simple-var($sys-red-accent-default);
    }
  }

  &[data-is-disabled] {
    cursor: not-allowed;
    color: simple-var($sys-neutral-text-disabled);
    background-color: $sys-neutral-background;

    .marker {
      background-color: currentColor
    }

    .box, .range {
      background-color: transparent;
    }
    
    &[data-is-holiday] {
      color: simple-var($sys-red-text-disabled);
    }
  }

  &[data-is-selected] {
    color: simple-var($sys-primary-on-accent);

    &[data-is-holiday] {
      color: simple-var($sys-primary-on-accent)
    }

    .box {
      background-color: $sys-primary-accent-default;
     }

    .marker {
      background-color: $sys-primary-on-accent;
    }

    &:hover,
    &:focus-visible {
      color: $sys-neutral-text-main;

      .marker {
        background-color: $sys-primary-accent-default;
      }

      .box {
        background-color: color-on-background-with-opacity($sys-primary-accent-default, $sys-primary-decor-default, $opacity-a016);
      }
    }
  }

  &:hover,
  &:focus-visible {
    &:not([data-is-selected]):not([data-is-disabled]) {
      .box {
        background-color: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background2-level,  $opacity-a016);
      }   
      
      .range {
        +.box {
          background-color: color-on-background-with-opacity($sys-primary-accent-default, $sys-primary-decor-default, $opacity-a016);
        }
      }
    }
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($typography, $size);
    }
  }
}

.content {
  position: relative;
}
